<template>
	<div class="forumdiscuss">
		<div>
			<el-row>
				<el-col :span='6'>
					<span>
						当前模块:<a>综合讨论</a>&emsp;<a>全部</a>&emsp;|&emsp;<a>推荐</a>&emsp;|&emsp;<a>热门</a>
					</span>
				</el-col>
				<el-col :span='16'>
					<el-dropdown>
						<span class="el-dropdown-link">
					   排序方式<i class="el-icon-arrow-down el-icon--right"></i>
					  </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>人气最高</el-dropdown-item>
							<el-dropdown-item>最新发布</el-dropdown-item>
							<el-dropdown-item>评论最多</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span='2'>
					<!--发帖按钮-->
					<el-button type="primary" @click="dialogVisible = true" style="float: right;">发帖</el-button>
					<!--对话框开始-->
					<el-dialog title="帖子信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
						<span>
					  	<!--表单开始-->
					  		<el-form ref="form" :model="form" label-width="80px">
					  			<el-form-item label="帖子分类">
							    <el-select v-model="form.kind" placeholder="请选择活动区域">
							      <el-option label="分类一" value="classa"></el-option>
							      <el-option label="分类二" value="classb"></el-option>
							    </el-select>
							  </el-form-item>
							  <el-form-item label="帖子标题">
							    <el-input v-model="form.title"></el-input>
							  </el-form-item>
							  <el-form-item label="帖子内容">
							    <el-input type="textarea" v-model="form.content"></el-input>
							  </el-form-item>
							</el-form>
					  	<!--表单结束-->
						</span>
						<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					    <el-button @click="dialogVisible = false">取 消</el-button>
					  </span>
					</el-dialog>
					<!--对话框结束-->
				</el-col>
			</el-row>
			<hr>
			<el-row>
				<el-col :span='2'>
					<img src="../../../www/upload/Tulips.jpg" />
				</el-col>
				<el-col :span='19'>
					<p><br>帖子标题&nbsp;<i>图标</i></p>
				</el-col>
				<el-col :span='3'>
					<ul>
						<li>
							发帖时间
						</li>
						<li>
							发帖者
						</li>
					</ul>
				</el-col>
			</el-row>
			<hr>
			<p style='background:#f4f4f4;padding:10px 20px;'>
				原版主题&nbsp;<i>图标</i><span style="float:right;color:#FF8800;"><i>图标</i>&nbsp;健康的收费贵多少分分工是德国法国</span>
			</p>
			<el-row>
				<el-col :span='2'>
					<img src="../../../www/upload/Tulips.jpg" />
				</el-col>
				<el-col :span='19'>
					<p><br>帖子标题&nbsp;<i>图标</i></p>
				</el-col>
				<el-col :span='3'>
					<ul>
						<li>
							发帖时间
						</li>
						<li>
							发帖者
						</li>
					</ul>
				</el-col>
			</el-row>
			<hr>
			<el-row>
				<el-col :span='2'>
					<img src="../../../www/upload/Tulips.jpg" />
				</el-col>
				<el-col :span='19'>
					<p><br>帖子标题&nbsp;<i>图标</i></p>
				</el-col>
				<el-col :span='3'>
					<ul>
						<li>
							发帖时间
						</li>
						<li>
							发帖者
						</li>
					</ul>
				</el-col>
			</el-row>
			<hr>
			<el-row>
				<el-col :span='2'>
					<img src="../../../www/upload/Tulips.jpg" />
				</el-col>
				<el-col :span='19'>
					<p><br>帖子标题&nbsp;<i>图标</i></p>
				</el-col>
				<el-col :span='3'>
					<ul>
						<li>
							发帖时间
						</li>
						<li>
							发帖者
						</li>
					</ul>
				</el-col>
			</el-row>
			<hr>
			<el-row>
				<el-col :span='2'>
					<img src="../../../www/upload/Tulips.jpg" />
				</el-col>
				<el-col :span='19'>
					<p><br>帖子标题&nbsp;<i>图标</i></p>
				</el-col>
				<el-col :span='3'>
					<ul>
						<li>
							发帖时间
						</li>
						<li>
							发帖者
						</li>
					</ul>
				</el-col>
			</el-row>
			<hr><br>
			<!--分页-->
			<el-pagination background layout="prev, pager, next" :total="700"></el-pagination>
		</div>
	</div>

</template>
<script>
	export default {
		name: 'ForumDiscuss',
		data() {
			return {
				msg: '帖子分类',
				//弹出的对话框
				dialogVisible: false,
				//对话框中的表单
				form: {
					kind: '',
					title: '',
					content: ''
				}
			}
		},
		methods: {
			handleClose(done) {
				//对话框
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		font-size: 12px;
	}
	
	.forumdiscuss {
		background: white;
		padding: 20px;
		margin: 0px auto;
		width: 90%;
		text-align: left;
	}
	
	ul li {
		text-align: right;
		line-height: 27px;
	}
	
	img {
		width: 70px;
		height: 70px;
		border-radius: 50%;
	}
</style>